<template>
  <div>
    <div v-if="shipment" class="shipment-box">
      <div class="header">
        <div class="steps">
          接收进度：<num2 :left-num="receiveNum" :right-num="boxNum" style="display: inline-block"></num2>
        </div>
        <div class="shipment-info">
          <div class="item">
            <div class="label">客户：</div>
            <div class="text">{{shipment.userAccount}}</div>
          </div>
          <div class="item">
            <div class="label">运输类型：</div>
            <div class="text">{{getTransferName(shipment.transferType)}}</div>
          </div>
          <div class="item">
            <div class="label">货件类型：</div>
            <div class="text">{{getShipmentTypeStr2(shipment.shipmentType)}}</div>
          </div>
        </div>
      </div>
      <div class="content">
        <shipment-box-table1 :shipment="shipment" :table-data="tableData" :hidden-table-data="false"></shipment-box-table1>
      </div>
    </div>
  </div>
</template>

<script>
import Num2 from "@/components/Common/Num2.vue";
import ShipmentBoxTable1 from "@/views/shipment/components/ShipmentBoxTable1.vue";
import shippingPlanDataMixin from "@/views/shippingPlan/mixin/shippingPlanDataMixin";
import {getShipmentTypeStr2} from "@/utils/shipment";

export default {
  name: "boxScanShipment",
  components: {ShipmentBoxTable1, Num2},
  mixins: [shippingPlanDataMixin],
  props: {
    shipment: {
      type: Object,
    }
  },
  computed: {
    // 接收的数量
    receiveNum(){
      const set = new Set()
      this.tableData.forEach(item=>{
        if(item.isReceived === 1){
          set.add(item.boxId)
        }
      })
      return set.size
    },
    // 箱子的数量
    boxNum(){
      return this.shipment.exBoxNum
    },
    tableData(){
      return this.shipment.boxLabelList ? this.shipment.boxLabelList : []
    }
  },
  data(){
    return {

    }
  },
  methods: {
    getShipmentTypeStr2
  },
}
</script>


<style scoped lang="scss">
.shipment-box{
  padding: 15px;
  .header{
    display: block;
    .steps{
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 15px;
    }
    .shipment-info{
      display: flex;
      margin-bottom: 10px;
      .item{
        display: flex;
        margin-right: 20px;
        font-size: 14px;
        .label{
          color: #999;
        }
        .text{

        }
      }
    }
  }
  .content{

  }
}
</style>
